<template>
    <view class="globe_back">
        <map class="mapW" :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true" :enable-building="true" @markertap="markertap"></map>

        <view class="back_fff list">
            <view class="f_28">
                <image class="icon" src="@/static/imgs/img.png" mode=""></image>
                顺丰快递 7731725564853321
                <text class="cl_3377FF fw_bold">复制</text>
            </view>
        </view>
        <view class="back_fff list1">
            <view class="logistics" v-for="item in logisticsList">
                <view>
                    <view class="line"></view>
                    <view class="round"></view>
                </view>
                <view class="node">
                    <view class="flex justify_content_between">
                        <view class="flex">
                            <view class="logtitle">{{ item.type }}</view>
                            <view class="time">{{ item.time }}</view>
                        </view>
                        <view @click="loginfo" class="flex loginfo justify_content_end f_28 cl_999CA3">
                            物流详情
                            <u-icon name="arrow-right" size="16"></u-icon>
                        </view>
                    </view>
                    <view class="text">{{ item.text }}</view>
                </view>
            </view>
        </view>
        <!-- 商品 -->
        <view class="flex back_fff p_24 br_24">
            <view>
                <image class="shopImg" src="@/static/imgs/img.png" mode="widthFix"></image>
            </view>
            <view>
                <view class="fw_bold f_32 listTitle">小牛电动 B0都市版新国标...</view>
                <view class="flex justify_content_between">
                    <view class="cl_999CA3 mr_24 f_28">2021新款;220V</view>
                    <view class="cl_999CA3 mr_24 f_28">x1</view>
                </view>
                <view class="flex justify_content_end mt_40 f_28">￥50.25</view>
            </view>
        </view>
        <!-- 留言 -->
        <view class="flex justify_content_between buyerInfo">
            <view class="flex name">
                <view>留言</view>
            </view>
            <view>买家留言详情</view>
        </view>
        <!-- 金额 -->
        <view class="store">
            <view class="flex justify_content_between detailed">
                <view>商品金额</view>
                <view>￥200.05</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>运费</view>
                <view>包邮</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>优惠</view>
                <view>￥0.00</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>合计</view>
                <view class="fw_bold" style="color: #ff6401">￥3215.02</view>
            </view>
        </view>
        <view class="store">
            <view class="flex justify_content_between detailed">
                <view>订单编号</view>
                <view>
                    20225113215554
                    <text class="cl_3377FF">复制</text>
                </view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>创建时间</view>
                <view>2022-02-10 20:30:56</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>付款时间</view>
                <view>2022-02-10 20:30:56</view>
            </view>
            <view class="flex justify_content_between detailed">
                <view>发货时间</view>
                <view>2022-02-10 20:30:56</view>
            </view>
        </view>
        <view style="height: 20px"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            count: 5,
            value: 5,
            latitude: 39.909,
            longitude: 116.39742,
            covers: [],
            locationData: [
                {
                    name: '我的位置',
                    location: { latitude: 39.909, longitude: 116.39742 },
                    id: 0
                },
                {
                    name: '服务位置',
                    location: { latitude: 39.909, longitude: 116.39742 },
                    id: 1
                }
            ],
            logisticsList: [
                {
                    type: '已签收',
                    time: '2022-02-10 20:30',
                    text: '[收货地址]贵州省贵阳市花果园金融街一号1824 王先生 156****4541'
                },
                {
                    type: '待取件',
                    time: '2022-02-10 20:30',
                    text: '您的快递已到达金融街一号菜鸟驿站处，请凭取件码3-3-15取件'
                }
            ]
        };
    },
    onLoad() {
        this.init();
    },
    methods: {
        init() {
            let _this = this;
            uni.getLocation({
                type: 'gcj02',
                success(e) {
                    _this.latitude = e.latitude;
                    _this.longitude = e.longitude;
                    console.log(e);
                    _this.getTeamList();
                }
            });
        },

        isBack() {
            this.$api.authBack();
            // this.isOpen()
        },
        setExchange() {
            // this.locationData.reverse();
        },
        loginfo() {
            uni.navigateTo({
                url: '/pages/business/logistics'
            });
        },
        isOpen() {
            this.$refs.popup.open();
        },
        isClose() {
            this.$refs.popup.close();
        }
    }
};
</script>

<style scoped lang="scss">
.buyerInfo {
    padding: 24rpx 32rpx;
    background: white;
    border-radius: 24rpx;
    margin: 24rpx 0;
    font-size: 28rpx;
    .name {
        margin-bottom: 16rpx;
    }
    .phone {
        color: #999ca3;
        margin-left: 16rpx;
    }
}
.shopImg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
}
.listTitle {
    width: 400rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.icon {
    width: 48rpx;
    height: 48rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    margin-right: 8rpx;
}
.mapW {
    width: 100%;
    min-height: 40vh;
}
.cover-box {
    margin-top: 160rpx;
    padding: 0 32rpx;
    .log-1 {
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: #3377ff;
    }
    .log-line {
        width: 2rpx;
        height: 40rpx;
        background-color: #ccced1;
        margin: 10rpx 0;
    }
    .log-2 {
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: #ff6401;
    }
}
.next-icon {
    position: fixed;
    left: 32rpx;
    top: 100rpx;
}
.list1 {
    padding: 24rpx;
    border-radius: 0 0 24rpx 24rpx;
    margin: 0 32rpx 24rpx;
    height: 350rpx;
}
.list {
    padding: 24rpx 24rpx 0;
    border-radius: 24rpx 24rpx;
    margin: 24rpx 32rpx 0;
    .round {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background: #00091a;
        font-size: 28rpx;
        margin-top: 16rpx;
    }
    .type {
        color: #3377ff;
        font-weight: bold;
    }
    .time {
        color: #ccced1;
    }
    .title {
        width: 90%;
        color: #00091a;
        font-size: 32rpx;
        font-weight: bold;
    }
    .address {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .name {
        font-weight: normal;
        color: #333a47;
        margin-right: 24rpx;
    }
    .iphone {
        font-weight: normal;
        color: #999ca3;
    }
    .money {
        text-align: right;
        color: #666b75;
    }
    .money text {
        color: #ff6401;
        font-weight: bold;
        font-size: 32rpx;
    }
    .btn {
        text-align: right;
    }
    .cance {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 8rpx;
        color: #666b75;
        text-align: center;
        border: 2rpx solid #ccced1;
        margin-top: 24rpx;
    }
    .buy {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 8rpx;
        color: #ffffff;
        text-align: center;
        background: #3377ff;
        margin-left: 24rpx;
        margin-top: 24rpx;
    }
}
.title {
    font-size: 28rpx;
    color: #333a47;
}
.infoimg {
    width: 140rpx;
    height: 140rpx;
    border-radius: 16rpx;
    margin: 24rpx 12rpx;
}
.store {
    padding: 24rpx;
    background: white;
    border-radius: 24rpx;
    margin: 0 32rpx 24rpx;
}
.storeImg {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
    margin-right: 16rpx;
}
.storeTitle {
    color: #00091a;
    font-size: 32rpx;
    margin-bottom: 8rpx;
}
.address {
    width: 48rpx;
    height: 48rpx;
    display: block;
    margin: 0 auto;
}
.addressText {
    color: #999ca3;
    font-size: 24rpx;
}
.salesVolume {
    color: #999ca3;
    font-size: 28rpx;
}
.detailed {
    color: #333a47;
    font-size: 28rpx;
    margin-bottom: 32rpx;
}

.round {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #666b75;
}
.line {
    width: 4rpx;
    height: 150rpx;
    background: #ccced1;
    margin-left: 4rpx;
}
.logistics:nth-child(1) .line {
    display: none;
}
.logistics:nth-child(1) .round {
    background: #3377ff;
}
.logistics:nth-child(2) .line {
    background: #3377ff;
}
.logistics:nth-child(1) .title,
.time {
    color: #00091a !important;
}
.logistics:nth-child(1) .time {
    color: #00091a !important;
}
.logistics:nth-child(1) .text {
    color: #00091a !important;
}
.logistics:nth-child(2) .loginfo {
    display: none;
}
.logistics {
    position: relative;
    top: 70rpx;
}
.node {
    position: absolute;
    left: 50rpx;
    bottom: -70rpx;
}
.logtitle {
    font-size: 32rpx;
    color: #666b75;
}
.time {
    font-size: 24rpx;
    color: #ccced1;
    margin-left: 8rpx;
    margin-top: 8rpx;
}
.text {
    color: #999ca3;
    font-size: 28rpx;
    margin-top: 16rpx;
}
</style>
